<template>
	<div>
		<!-- 最外层div -->
		<div>
			<!-- 表格 -->
			<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
				style="width: 100%" :cell-style="{ 'text-align': 'center' }"
				v-el-table-infinite-scroll="handleTableScroll" :header-cell-style="{ 'text-align': 'center' }" stripe>
				<el-table-column prop="id" label="序号" width="70" />
				<el-table-column prop="rule" label="佣金比例" />
				<el-table-column prop="title" label="规则" />
				<el-table-column prop="create_time" label="创建时间" />
				<el-table-column label="操作" fixed="right" width="230">
					<template #default="scope">
						<div class="handle">
							<el-button type="primary" class="button" @click="DiaLog(scope.row)">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="paging">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
					:page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" background
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
			</div>
			<!-- 编辑弹出框 -->
			<el-dialog v-model="Add_or_Edit" title="编辑佣金比例" width="800" align-center>
				<el-form ref="ruleFormRef" style="width: 90%;margin-left: 5%;" :model="ruleForm" status-icon
					:rules="rules" label-width="auto" class="demo-ruleForm">
					<el-form-item label="规则标题" prop="title">
						<el-input v-model="ruleForm.title" placeholder="请输入佣金规则标题" disabled />
					</el-form-item>
					<el-form-item label="比例:%" prop="rule">
						<el-input-number v-model="ruleForm.rule" :min="1" :max="10" style="width: 100%;" />
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="Add_or_Edit = false">取消</el-button class="button">
						<el-button type="primary" @click="affirm(ruleFormRef)" style="width:70px;height:40px">
							确认编辑
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Brokerage, EditBrokerage } from '../../../api/DealCenter/brokerage'
import '../../../style/all.css'//全局css
// 登录存储起来的个人账户信息，为了拿token值
const tokens = JSON.parse(localStorage.getItem('tokens'));
console.log(tokens);
// 表格数据
const tableData = ref([])
// 请求的数据
onMounted(() => {
	data()
})
// 数据
const data = () => {
	Brokerage({
		token: tokens.token,
		uid: tokens.id
	}).then(res => {
		console.log(res);
		tableData.value = res.data;
		tableData.value.forEach(item => {
			item.rule = `${item.rule}%`
		});
	})
}

// 页面表格页以及一页几条
const pageSize = ref(5);
const currentPage = ref(1);
// 编辑的弹出框
const Add_or_Edit = ref(false)


function handleTableScroll() {
	console.log('滚动分页')

}
// 编辑的点击事件
const DiaLog = (data) => {
	console.log(data);
	// 对话框隐藏
	Add_or_Edit.value = true
	ruleForm.id = data.id
	ruleForm.rule = data.rule.slice(0, data.rule.length - 1)
	ruleForm.title = data.title
	ruleForm.introduce = data.introduce
}
const affirm = (formEl) => {
	if (!formEl) return
	formEl.validate((valid) => {
		console.log(ruleForm);
		if (valid) {
			EditBrokerage({
				token: tokens.token,
				uid: tokens.id
			}, ruleForm).then(res => {
				console.log(res);
				Add_or_Edit.value = false
				if (res.code == 1) {
					ElMessage({
						message: '编辑成功',
						type: 'success',
					})
				} else {
					ElMessage.error('编辑失败')
				}

				data()
			})
		} else {
			ElMessage.error('编辑失败')
		}
	})
}

// 表单对象
const ruleForm = reactive({
	id: '',
	rule: '',
	introduce: ''
})
// 表单效验
const ruleFormRef = ref('')
const rules = reactive({
	rule: [{
		required: true,
		message: '请输入佣金比例',
		trigger: 'blur',
	}]
})

</script>

<style scoped>
.paging {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.input {
	width: 45%;
	height: 40px;
	margin-right: 10px;
}

.top {
	width: 100%;
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.button {
	width: 55px;
	height: 35px;
}
</style>